<template>
  <div class="grille-container">
    <!-- 目录 -->
    <cascader-catalog v-model:category-id="query.categoryId" :category-type="categoryType" :title="'素材目录'" @refresh="handlePage" />
    <div class="main-container">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane :key="0" :label="'全部'" :name="0" />
        <el-tab-pane v-for="item in tabPanes" :key="item.code" :label="item.desc" :name="item.code" />
      </el-tabs>
      <el-form :model="query" inline label-width="80px">
        <el-form-item>
          <upload-file v-permission="'material:save'" :category-id="query.categoryId" :on-bus="onBus" @refresh="handlePage" />
          <el-button v-permission="'material:edit'" style="margin-left: 10px" :disabled="!ids.length > 0" @click="handleBatchMove()">批量移动 </el-button>
          <el-button v-permission="'material:delete'" style="margin-left: 10px" :disabled="!ids.length > 0" @click="handleBatchDelete()">批量删除 </el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.materialName" placeholder="请输入素材名称" prefix-icon="Search" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"> 查询</el-button>
          <el-button @click="resetQuery()">重置</el-button>
          <common-sort @sort="handleSort" />
        </el-form-item>
      </el-form>
      <el-table v-loading="page.loading" :data="page.list" row-key="id" class="drag-table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :width="40" />
        <el-table-column :min-width="100" label="素材名称" prop="materialName">
          <template #default="scope">
            <span>{{ scope.row.materialName }}</span>
            <span v-if="scope.row.materialType === 4"><br /></span>
            <el-image v-if="scope.row.materialType === 4" :src="scope.row.materialUrl" :preview-src-list="[scope.row.materialUrl]" preview-teleported style="height: 50px; width: auto" />
          </template>
        </el-table-column>
        <el-table-column :min-width="60" label="素材大小" prop="materialSize">
          <template #default="scope">
            {{ transformSize(scope.row.materialSize) }}
          </template>
        </el-table-column>
        <el-table-column :min-width="40" label="素材类型" prop="materialType">
          <template #default="scope">
            <enum-view :enum-name="'MaterialType'" :enum-value="scope.row.materialType" />
          </template>
        </el-table-column>
        <el-table-column :min-width="40" label="素材状态" prop="videoStatus">
          <template #default="scope">
            <span v-if="scope.row.materialType < 3">
              <enum-view :enum-name="'VideoStatus'" :enum-value="scope.row.videoStatus" />
            </span>
            <span v-else>成功</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="40" label="平台" prop="vodPlatform">
          <template #default="scope">
            <enum-view v-if="scope.row.materialType < 3" :enum-name="'VodPlatform'" :enum-value="scope.row.vodPlatform" />
            <enum-view v-else :enum-name="'StoragePlatform'" :enum-value="scope.row.storagePlatform" />
          </template>
        </el-table-column>
        <el-table-column :width="160" fixed="right" label="操作" prop="address">
          <template #default="scope">
            <el-button v-permission="'material:edit'" link type="primary" @click="openFormModal(scope.row)">编辑 </el-button>
            <el-divider direction="vertical" />
            <el-button v-permission="'material:delete'" link type="primary" @click="handleDelete(scope.row)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <common-pagination v-model:page="page" @pagination="handlePage" />
    </div>
  </div>
  <material-form ref="formRef" @refresh="handlePage" />
  <catalog-move v-if="catalogMoveVisible" :ids="ids" :category-type="categoryType" :visible="catalogMoveVisible" @callback="handleMove" />
</template>

<script setup>
  import useTable from '@/utils/table'
  import { onMounted, onUnmounted, ref } from 'vue'
  import MaterialForm from './MaterialForm.vue'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import { resourceApi } from '@/api/resource'
  import { transformSize } from '@/utils/base'
  import { getEnumList } from '@/utils/enum'
  import CascaderCatalog from '@/components/Cascader/Catalog/index.vue'
  import UploadFile from '@/components/Upload/File/index.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import EnumView from '@/components/Enum/View/index.vue'
  import CatalogMove from '@/components/Cascader/Catalog/CatalogMove.vue'
  import CommonSort from '@/components/Common/Sort/index.vue'
  import { ArrowDown } from '@element-plus/icons-vue'

  // 类型
  const activeName = ref(0)
  const tabPanes = ref()
  const categoryType = ref(2)

  const onBus = ref(false)
  onMounted(async () => {
    onBus.value = true
    tabPanes.value = await getEnumList('MaterialType')
  })
  onUnmounted(() => {
    onBus.value = false
  })

  const handleTabClick = (tab) => {
    activeName.value = tab.props.name
    query.materialType = tab.props.name
    handleQuery()
  }

  // 添加/修改
  const formRef = ref()
  const openFormModal = (item) => {
    formRef.value.onOpen(item)
  }

  const ids = ref([])
  const handleSelectionChange = (rows) => {
    ids.value = []
    rows.forEach((row) => {
      ids.value.push(row.id)
    })
  }

  // 批量移动
  const catalogMoveVisible = ref(false)
  const handleBatchMove = () => {
    catalogMoveVisible.value = true
  }
  const handleMove = async (row) => {
    if (row) {
      await resourceApi.materialBatchEdit(row)
      ElMessage.success('修改成功')
      await handlePage()
    }
    catalogMoveVisible.value = false
  }

  // 批量删除
  const handleBatchDelete = async () => {
    ElMessageBox.confirm('是否确认删除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      resourceApi.materialBatchDelete({ ids: ids.value }).then((res) => {
        ElMessage.success(res)
        handlePage()
      })
    })
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery, handleDelete, handleSort } = useTable({
    page: resourceApi.materialPage,
    delete: resourceApi.materialDelete,
    sort: resourceApi.materialSort
  })
</script>
